/* 兄弟元素并列写  父子元素嵌套写 */
//查看备注
/* 
less当中写备注有两种格式：
多行备注 会被解析到css文件
单行备注不会被解析到css文件
*/
// less定义变量
/* 属性值 @变量名:属性值   调用  @变量名
   属性名：@变量名：属性名  调用 @{变量名}
   选择器可以定义变量
   @变量名：选择器的值  调用  @{变量名}

*/
/* 
mixin 混合  类似于js当中函数
还可以做运算

引入其他less文件 @import引入

循环


*/
@import './reset.less';
@zero:0;
@w:500px;
@width:width;
@yangyang:wrap;

.center(@wi:100px,@hei:100px,@color:pink){
    width: @wi;
    height: @hei;
    background-color: @color;
    position: absolute;
    left: @zero;
    right: @zero;
    bottom: @zero;
    top: @zero;
    margin: auto;
}
.@{yangyang}{
    /* @zero:10px;
    @{width}: @w;
    height: 500px;
    background-color: red; */
    .center(@wi:500px,@hei:500px,@color:red);
    @zero:50px;
    .middle{
        .center(@wi:300px,@hei:300px,@color:yellow);
        .inner{
            .center();
        }
    }
}
.wrap1{
    width: 10 + 2px;
    height: 10px;
    background-color: rgb(255, 0, 30);
}
.list{
    list-style: none;
    li{
        color: green;
        // &代表前方所有的元素
        &:nth-child(2){
            background-color: red;
        }
    }
}

// 循环
// .loop();
.loop(@i) when (@i>0){
    .loop(@i - 1);
    .test@{i}{
        width: (10px + 5 * @i);
    }    
}
.loop(3);
